<template>
    <div id="" class="xinx">

      <div class="router"  :class="this.ta != 0?Classn:''" >
        <!--系统管理员页面-->
        <div class="yhxx">用户信息</div>
        <!--搜索-->
        <div >
          <div class="suo"><span>用户信息检索：</span><input type="text" v-model="yhname"></div>
        </div>
        <ul class="xtul">
          <li>
            <div>id</div>
            <div>账号</div>
            <div>密码</div>
            <div>用户编号</div>
            <div>用户类型</div>
            <div>用户车数</div>
            <div>大卡车</div>
            <div>大客车</div>
            <div>小轿车</div>
            <div></div>
          </li>
          <li  v-for="(item,index) in search">
            <div>{{item.id}}</div>
            <div>{{item.name}}</div>
            <div>{{item.password}}</div>
            <div>{{item.user_number}}</div>
            <div>{{item.user_type}}</div>
            <div>{{item.the_car_number}}</div>
            <div>{{item.car}}</div>
            <div>{{item.motor_bus}}</div>
            <div>{{item.sedan}}</div>
            <div>
              <button @click="schu(index)">删除</button>
            </div>
          </li>
        </ul>
      </div>
      <div class="router"  :class="this.ta != 1?Classn:''" >
        <!--个人页面-->
        <div class="dd">
          <div class="tp">
            <div><img src="../../../static/images/wei.jpg"/></div>
            <!--<div id="id" style="display:none" v-text="userName.id"></div>-->
            <ul class="ul">

              <li><span>用户名：</span>{{userName.name}}</li>
              <li><span>用户类型：</span>{{userName.user_type}}</li>
              <li><span>车辆数量：</span>{{userName.user_number}}</li>
              <li><span></span></li>
            </ul>
            <!-- mui -->
            <button  @click="gai(0)">修改个人信息</button>
            <button  @click="gai(1)">修改车辆信息</button>

          </div>
          <!-- 信息展示-->
          <div class="xianqin">
            <div><h3>信息展示</h3></div>
            <!--车辆详情-->
            <div>
              <ul class="xq" > <!--v-if="xiangqing.owner!=userName.name"-->
                <li>
                  <div>编号</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.serial_number}}</div>
                </li>
                <li>
                  <div>车辆品牌</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.manufacturing_company}}</div>
                </li>
                <li>
                  <div>购买时间</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.purchasing_date | fil('YYYY-MM-DD')}}</div>
                </li>
                <li>
                  <div>车牌号</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.license_plate_number}}</div>
                </li>
                <li>
                  <div>车辆类型</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.model_of_car}}</div>
                </li>
                <li>
                  <div>总里程</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.the_total_mileage}}</div>
                </li>
                <li>
                  <div>油耗</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.fuel_consumption}}</div>
                </li>
                <li>
                  <div>基本费用</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.basic_maintenance_cost}}</div>
                </li>
                <li>
                  <div>养路费</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.road_toll}}</div>
                </li>
                <li>
                  <div>总费用</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.cumulative_total_cost}}</div>
                </li>
                <li>
                  <div>核载人数</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.busload}}</div>
                </li>
                <li>
                  <div>箱数</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.carton_numbers}}</div>
                </li>
                <li>
                  <div>载重</div>
                  <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.load_capacity}}</div>
                </li>

              </ul>
            </div>

            <div class="xiugai">
              <div :class="this.xius=='0'?Classblock:''">
                <h4>修改个人信息</h4>
                <div class="inp">
                  <span>用户名：</span><input type="text" :placeholder="place" v-model="gainame" >
                </div>
                <div class="inp">
                  <span>新密码：</span><input type="text" :placeholder="place" v-model="gaimima" >
                </div>
                <div class="inp">
                  <span>重复密码：</span><input type="text" :placeholder="place" v-model="chongfumima" >
                </div>
                <button @click="updUser">确认修改</button>
              </div>
              <div :class="this.xius=='1'?Classblock:''">
                <!--可修改 购买时间 车牌号 车辆类型 总里程 油耗 基本费用 养路费 总费用 核载人数 箱数 载重-->
                <h4>修改车辆信息</h4>
                <div class="inp">
                  <span>编号：</span><input type="text"  v-model="bianhao">
                </div>
                <div class="divinp">

                  <div class="inp">
                    <span>购买时间：</span><input type="text"  v-model="gotime">
                  </div>
                  <div class="inp">
                    <span>品牌：</span><input type="text"  v-model="gopinp">
                  </div>
                  <div class="inp">
                    <span>车牌号：</span><input type="text" v-model="gotchehao">
                  </div>
                  <div class="inp">
                    <span>车辆类型：</span>
                    <select v-model="gottype">
                      <option value="小轿车">小轿车</option>
                      <option value="大客车">大客车</option>
                      <option value="大卡车">大卡车</option>
                      <option itany="itany" value="">请选择车辆类型</option>
                    </select>

                    <!-- <span>车辆类型：</span><input type="text"  v-model="gottype">-->
                  </div>
                  <div class="inp">
                    <span>总里程：</span><input type="text"  v-model="gotli">
                  </div>
                  <div class="inp">
                    <span>油耗：</span><input type="text"  v-model="gotyouhao">
                  </div>
                  <div class="inp">
                    <span>基本费用：</span><input type="text"  v-model="gofyong">
                  </div>
                  <div class="inp">
                    <span>养路费：</span><input type="text"  v-model="goyanglu">
                  </div>
                  <div class="inp">
                    <span>总费用：</span><input type="text"  v-model="gozongf">
                  </div>
                  <div class="inp" :class="this.gottype!='大客车'?classType:Classtt">
                    <span>核载人数：</span><input type="text"  v-model="gorshu">
                  </div>
                  <div class="inp" :class="this.gottype!='小轿车'?classType:Classtt">
                    <span>箱数：</span><input type="text"  v-model="goxiang">
                  </div>
                  <div class="inp" :class="this.gottype!='大卡车'?classType:Classtt">
                    <span>载重量：</span><input type="text"  v-model="gozhong">
                  </div>
                </div>
                <div>
                  <button @click="chegai">确认修改</button>
                  <button @click="chongxi">重新输入</button>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>


    </div>
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "userinfo",
      props:['userName'],
      data(){
          return{
            yhname:'',

            xiangq:[],
            classType:'types',
            Classtt:"type",
            xius:'',
            Classblock:"block",
            //数据渲染
            username:'',
            type:"",
            vernumber:"",
            xiangqing:[],
            //修改车辆信息
            bianhao:'',
            gotime:"",//改时间
            gotchehao:'',//改车牌号
            gottype:'', //改车辆类型
            gotli:"",//改总里程
            gotyouhao:'',//改油耗
            gofyong:"",//改基本费用
            goyanglu:"",//改养路费
            gozongf:"",//改总费用
            gorshu:"",//改核载人数
            goxiang:"",//改箱数
            gozhong:"",//改载重量
            gopinp:"",//该品牌
            place:"",
            //该个人信息
            gainame:'',
            gaimima:'',
            chongfumima:'',
            ids:'',

            ta:'',
            Classn:'blacx'

          }
      },
      computed:{
        search: function () {
          var yhna = this.yhname;
          if(yhna){
            return this.xiangq.filter(function (xiang) {
              return Object.keys(xiang).some(function (key) {
                return String(xiang[key]).toLowerCase().indexOf(yhna) > -1
              })
            })
          }
          return this.xiangq;
        }
      },
      created(){
        this.getchusi();
        //console.log(this.userName)
        this.ids = this.userName.id
      },
      methods:{
         // 删除用户信息
        schu:function (s) {
          if(!confirm('是否删除数据')){
            return;//当用户点击取消 应阻断这个方法的 后面代码的执行
          }
          var ids = this.xiangq[s].id;
          this.$http.post('/api/user/delUser',{
            id: ids
          },{}).
          then((response) => {
            //console.log(response);
            Toast({
              message: '删除成功',
              position: 'bottom',
              duration: 5000
            });
          })
          //刷新数据
          this.getchusi();
        },
          //修改选项显示
        gai:function (s) {
          this.xius = s ;
        },
        //请求车辆信息
        getchusi:function () {
          this.name = this.userName.name;
          if(this.name == "系统用户"){
            this.ta = 0;
            //console.log("个人用户")
          }else{
            this.ta = 1;
            //console.log("系统用户")
          }
          this.$http.get('/api/user/referVehicle',).then(function(response){
            this.xiangqing  = response.body; //把车辆数据 传给数组.xiangqing
            //console.log(response.body)
          });
          this.$http.get('/api/user/referUser',).then(function(response){
            this.xiangq  = response.body; //把用户数据 传给数组.xiangqing
            //console.log(response.body)
          })
        },

        //修改个人数据
        updUser(){
          //检测密码是否相同
          if(this.gaimima == this.chongfumima){
            var password = this.chongfumima;
            var usernumber = this.gainame;
            var id = this.ids;
            this.$http.post('/api/user/updUser',{
              password: password,
              user_number: usernumber,
              id: id
            },{}).then((response) => {
              //console.log(response);
              Toast({
                message: '修改成功',
                position: 'bottom',
                duration: 5000
              });
              this.gainame='';
            })
          }else{
            Toast({
              message: '密码不一致！',
              position: 'bottom',
              duration: 5000
            });
          }
          this.chongfumima = '';
          this.gainame='';
        },


        //还没好

        //修改车辆数据 请求
        chegai:function () {
          var bianid ='',czhu='',tim='',hao='',type='',li='',fyong='',yanglu='',zongf='',youhao='',rshu='',inp='',zhong='',xiang='';
            //获取编号 根据编号获取id 修改数据
           for(var i=0;i<this.xiangqing;i++){
             if(this.xiangqing[i].serial_number == this.bianhao){
               //console.log(i,this.xiangqing[i].id);
               bianid = this.xiangqing[i].id;
               czhu = this.xiangqing[i].owner;
               tim = this.xiangqing[i].purchasing_date;
               hao = this.xiangqing[i].license_plate_number;
               type = this.xiangqing[i].model_of_car;
               li = this.xiangqing[i].the_total_mileage;
               fyong = this.xiangqing[i].basic_maintenance_cost;
               yanglu = this.xiangqing[i].road_toll;
               zongf = this.xiangqing[i].cumulative_total_cost;
               youhao = this.xiangqing[i].fuel_cons;
               rshu = this.xiangqing[i].busload;
               inp = this.xiangqing[i].manufacturing_company;
               zhong = this.xiangqing[i].load_capacity;
               xiang = this.xiangqing[i].carton_numbers;
               console.log("id:"+bianid+",车主:"+czhu+",时间:"+tim+",车牌号:"+hao+"," +
                 "类型:"+type+",总里程:"+li+",基本费用:"+fyong+",养路费:"+yanglu+",总费用:"
                 +zongf+",油耗:"+youhao+",核载人数:"+rshu+",品牌:"+inp+",改载重量:"+zhong+",箱数:"+xiang)
             }
           }
           var id =bianid, time ='', chezhu = czhu, gotchehao = hao,
             gottype = type, gotli = li, gofyong = fyong, goyanglu = yanglu,
             gozongf = zongf, gotyouhao = youhao, gorshu = rshu,
             goxiang = xiang, gozhong = zhong, gopinp = inp;
          if(this.gotime.length == 0){time = tim}else{time = this.gotime} //时间
          if(this.gotchehao.length == 0){gotchehao = hao}else{gotchehao = this.gotchehao}//车牌号
          if(this.gottype.length == 0){gottype = type }else{gottype = this.gottype}//类型
          if(this.gotli.length == 0){gotli = li}else{gotli = this.gotli}//总里程
          if(this.gofyong.length == 0){gofyong = fyong}else{gofyong = this.gofyong}//基本费用
          if(this.goyanglu.length == 0){goyanglu = yanglu}else{goyanglu = this.goyanglu}//养路费
          if(this.gopinp.length == 0){gopinp = inp}else{gopinp = this.gopinp}//品牌
          if(this.gotyouhao.length == 0){gotyouhao = youhao}else{gotyouhao = this.gotyouhao}//改油耗
          if(this.gozongf.length == 0){gozongf = zongf}else{gorshu = this.gozongf}//改总费用
          if(this.gorshu.length == 0){gorshu = rshu}else{gorshu = this.gorshu}//改核载人数
          if(this.goxiang.length == 0){goxiang = xiang}else{goxiang = this.goxiang}//改箱数
          if(this.gozhong.length == 0){gozhong = zhong}else{gozhong = this.gozhong} //改载重量

          this.$http.post('/api/user/updVehicle',{
            license_plate_number: gotchehao, //车牌号
            manufacturing_company: gopinp, //品牌
            purchasing_date:time, //时间
            model_of_car:gottype, //类型
            the_total_mileage:gotli,//总里程
            fuel_cons:gotyouhao,//油耗
            basic_maintenance_cost:gofyong,//基本费用
            road_toll:goyanglu,//养路费
            cumulative_total_cost:gozongf,//总费用
            busload:gorshu,//改核载人数
            carton_numbers:goxiang,//改箱数
            load_capacity:gozhong,//改载重量
            owner:chezhu,//车主
            id: id
          },{}).then((response) => {
            console.log(response);
            Toast({
              message: '修改成功',
              position: 'bottom',
              duration: 5000
            });
          });
            //重新刷新数据
            this.getchusi();
            //发布后 清空文本框
            this.gotime = "";
            this.gotchehao = "";
            this.gottype = "";
            this.gotli = "";
            this.gotyouhao = "";
            this.gofyong = "";
            this.goyanglu = "";
            this.gorshu = "";
            this.gozongf = "";
            this.goxiang = "";
            this.gozhong = "";
            this.gopinp = "";
        },
        //清空input
        chongxi:function () {
          this.gotime = "";
          this.gotchehao = "";
          this.gottype = "";
          this.gotli = "";
          this.gotyouhao = "";
          this.gofyong = "";
          this.goyanglu = "";
          this.gorshu = "";
          this.gozongf = "";
          this.goxiang = "";
          this.gozhong = "";
          this.gopinp = "";
        }



      }
    }
</script>

<style scoped>
  .suo{display: flex;justify-content: center}
  .suo span{vertical-align: middle;}
  .suo input[type='text']{
    vertical-align: middle;
    width: 200px;
    height: 25px;
  }
  .yhxx{padding: 20px 0}
  .xtul{
    font-size: 14px;
    width:100%;color:black;margin: 20px auto;}
  .xtul>li{display: flex;margin-bottom: 2px;line-height: 30px}
  .xtul>li:first-child{font-size: 16px;margin-bottom: 10px}
  .xtul>li:not(:first-child){
    border:1px solid darkgray;
    border-raius:3px
  }
  .xtul>li>div{flex:1;vertical-align: middle}
  .xinx .router{
    display: none;
    width: 100%;
    height:100%;
  }
  .xinx{
    width: 100%;
    height:100%;}
  .xinx .blacx{display: block}
  .dd{height:100%;display: flex}
  div.tp{
    border-right: 1px solid darkgray;
    flex: 1;
    min-width:200px;}
  div.tp>div:first-child{
    margin:20px auto;
    width: 40px;
    border-radius:50%;
    overflow: hidden;
  }
   div.tp img{width: 100%}
   div.xianqin{flex:3}
  .tp button{
    border:1px solid darkgray;
    border-radius:2px;
    text-align: center;
    margin-bottom: 15px;
  }
  .ul{font-size: 16px;text-align: left}
  .ul li{margin-bottom: 10px;color: black}
  .ul span{
    display:inline-block;
    width:50%;
    color:darkgray;
    text-align: right}

  .xianqin{
    min-width: 624px;
    background-color: #bcffee;
  }
  h3{margin:30px  }
  h4{margin: 20px}
  .xq{
    padding: 10px 4px;
    width: 100%;
    font-size:12px;
    display: flex;
    justify-content: space-between;
  }
  .xq>li{
    padding: 3px 2px;
    text-align: left;
  }
  .xq>li div {
    min-height: 24px;
    line-height: 24px;
  }

  .divinp{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .inp span{display: inline-block;vertical-align: middle;font-size: 16px}
  .inp input,.inp select{
    font-size: 16px;
    padding: 0 5px;
    width: 50%;
    height: 24px;
    display: inline-block;
  }


  .divinp>div.inp{width: 48%;}
  .divinp>div.inp span{
    font-size: 12px;
    text-align: right;
    min-width: 60px;
   }
  .divinp>div.inp>input,.inp select{height: 20px;margin-bottom: 5px}
  .xiugai>div{display: none;}
  .xiugai>div.block{display: block}
  .types{visibility: hidden}
  .type{visibility:visible}
</style>
